<!-- 当前组件是用于前端通用顶部导航条 -->
<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'

const isLoggedIn = computed(() => {
  return !!localStorage.getItem('token')
})

const name = computed(() => {
  return localStorage.getItem('name') || '用户'
})

const iconUrl = computed(() => {
  return localStorage.getItem('icon') || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
})

const activeIndex = ref('/index') // 当前默认激活的菜单项
const route = useRoute()
// 监听路由变化，更新激活菜单项
watch(() => route.path, (newPath) => {
  activeIndex.value = newPath
})

const router = useRouter()
// 跳转登录页
const goToLogin = () => {
  router.push('/login')
}

// 用户操作处理
const handleUserCommand = (command) => {
  switch (command) {
    case 'profile':
      // 跳转到个人中心（如果有的话）
      console.log('跳转到个人中心')
      break
    case 'logout':
      handleLogout()
      break
  }
}

// 退出登录
const handleLogout = () => {
  sessionStorage.removeItem('token')
  sessionStorage.removeItem('name')
  sessionStorage.removeItem('icon')
  router.push('/login')
}

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<template>
  <el-container class="layout-container">
    <el-header class="nav-header">
      <div class="nav-container">
  
        <el-menu router :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64"
          text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
          <el-menu-item index="/userindex/index">首页</el-menu-item>
          <el-menu-item index="/userindex/categorylist">分类列表</el-menu-item>
          <el-menu-item index="/userindex/announcement">商品公告</el-menu-item>
          <el-menu-item index="/userindex/personalcenter">个人中心</el-menu-item>
          <el-menu-item index="/userindex/shoppingcar">购物车</el-menu-item>
        </el-menu>

        <!-- 右上方用户信息 -->
        <div class="user-area">
          <div v-if="isLoggedIn" class="user-info">
            <el-avatar :src="iconUrl" :size="32"></el-avatar>
            <span class="username">{{ name }}</span>
            <!-- 菜单折叠到下拉菜单中。 -->
            <el-dropdown @command="handleUserCommand">
              <el-button type="primary" size="small" link>
                <el-icon><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                  <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div v-else class="login-prompt">
            <el-button @click="goToLogin" size="small" type="primary">请登录</el-button>
          </div>
        </div>
      </div>
    </el-header>

    <el-main class="main-content">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<style scoped>
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #545c64;
  padding: 0 20px;
  height: 100%;
}

/* 让导航菜单优先占用空间 */
.el-menu {
  flex: 1; 
  min-width: 0; /* 防止flex item溢出 */
}

.user-area {
  flex-shrink: 0; /* 防止用户区域被压缩 */
}

.layout-container {
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

.nav-header {
  padding: 0;
  margin: 0;
  height: 60px;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #545c64;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.main-content {
  padding: 0;
  margin: 0;
  height: calc(100vh - 60px);
}

.user-info,
.login-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
}

.username {
  color: white;
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 响应式设计
针对平板及以下尺寸的设备（如 iPad 等）
缩小了导航容器的内边距
限制用户名的最大宽度为 80px */
@media (max-width: 768px) {
  .nav-container {
    padding: 0 10px;
  }

  .username {
    max-width: 80px;
  }
}

/* 针对手机等小屏幕设备
完全隐藏用户名（.username { display: none; }）
减小用户区域的间距 */
@media (max-width: 480px) {
  .username {
    display: none;
  }

  .user-area {
    gap: 5px;
  }
}
</style>